<template>
  <div>
    <el-dialog :visible="dialogVisible" title="解答助手" width="800" :before-close="handleClose">
      <div style="height: 500px;" v-loading="loading">
        <div style="height: 100%;overflow-y: scroll">
          <div v-for="v in list">
            <div class="item1" v-if="v.type == 1">
              <div class="left">
                <img src="https://img.huopu.com/p/202305/20230523151095.png" alt="">
              </div>
              <div class="right">
                <div>{{ getTimee(v.time) }}</div>
                <div v-html="v.msg"></div>
              </div>
            </div>
            <div class="item2" v-else>
              <div class="right">
                <div>{{ getTimee(v.time) }}</div>
                <div>{{ v.msg }}</div>
              </div>
              <div class="left">
                <img :src="$store.state.user.avatar"
                  alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="display: flex;">
        <el-input v-model="content" placeholder="请输入问题" @keyup.enter="send"></el-input>
        <el-button type="primary" style="margin-left:20px" @click="send">发送</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from '@/api/axios'
export default {
  data() {
    return {
      loading: false,
      dialogVisible: false,
      content: '',
      list: [
        {
          type: 1,
          time: new Date().getTime(),
          msg: 'hello，我是ai助手，欢迎交流提问哦～'
        }
      ]
    }
  },
  methods: {
    openp() {
      this.dialogVisible = true
    },
    handleClose(){
      this.dialogVisible=false
    },
    getTimee(time) {
      console.log(time)
      let t = new Date(time)
      let nian = t.getFullYear()
      let yue = t.getMonth() + 1
      let ri = t.getDate()
      let shi = t.getHours()
      let fen = t.getMinutes()
      let miao = t.getSeconds()
      return `${nian}/${yue}/${ri} ${shi < 10 ? '0' + shi : shi}:${fen < 10 ? '0' + fen : fen}:${miao < 10 ? '0' + miao : miao}`
    },
    send() {
      this.list.push({
        type: 2,
        time: new Date().getTime(),
        msg: this.content
      })
      let text = this.content
      this.content = ''
      this.loading = true
      axios({
        url: 'https://api.binjie.fun/api/generateStream?refer__1360=n4%2Bx9DcDBDgn0%3DQD%3DD%2FD0ioNoiKpa2Bx7KKdwQx',
        method: 'post',
        data: {
          network: true,
          userId: '#/chat/1741138368085',
          stream: false,
          prompt: text
        }
      }).then(res => {
        this.list.push({
          type: 1,
          time: new Date().getTime(),
          msg: res.replace(/```([\s\S]*?)```/g, '<div style="background-color: white;padding:10px;margin:10px 0">\$1</div>')
        })
        this.loading = false
        console.log(res)
      })
    }
  }
}


</script>
<style scoped>
.item1,
.item2 {
  display: flex;
  margin-bottom: 20px;

}

.item2 {
  justify-content: flex-end;
}

.item2 .left {
  margin-left: 10px;
  flex-shrink: 0;
}

.item2 .left img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.item1 .left {
  margin-right: 10px;
  flex-shrink: 0;

}

.item1 .right>div:nth-child(2) {
  margin-right: 25px;
  padding: 10px;
  background-color: rgb(244, 246, 248);
  border-radius: 6px;
}

.item1 .left img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.item2 .right>div:nth-child(1) {
  text-align: right;
}

.item2 .right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}

.item2 .right>div:nth-child(2) {

  padding: 10px;
  margin-left: 25px;
  background-color: rgb(210, 249, 209);
  border-radius: 6px;
  color: black;
}
</style>